<template>
  <div
    class="rect-num"
    :class="{
      'rect-num--border': border,
    }"
  >
    <div class="rect-num-label">{{ label }}</div>
    <div class="rect-num-value">
      <slot>{{ value }}</slot>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "RectNum",
  props: {
    label: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    lineColor: {
      type: String,
      default: "#ffc916",
    },
    border: {
      type: Boolean,
      default: true,
    },
  },
});
</script>

<style lang="scss" scoped>
.rect-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;

  &--border {
    border-bottom: 1px solid #fff;
  }

  &:first-child {
    margin-top: 0;
  }

  &-label {
    position: relative;
    padding-left: 6px;
    color: #fff;
    font-size: 12px;
    font-family: cn;

    &::after {
      position: absolute;
      top: 50%;
      left: 0;
      width: 2px;
      height: 6px;
      margin-top: -3px;
      background-color: v-bind(lineColor);
      border-radius: 6px;
      content: "";
    }
  }

  &-value {
    color: #ffc916;
    font-size: 14px;
    font-family: num;
  }
}
</style>
